<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
            cursor: pointer;
        }
        
        .wrap {
            width:1000px;
            margin:30px auto;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 1000px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        table thead tr td{
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
        table tr td:first-child{
            text-align: left;
            width:0px;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" id="whole"/>
                    </td>
                    <td>商品</td>
                    <td>价格</td>
                </tr>
            </thead>
            <tbody id="signal">
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
	<script type="text/javascript">
		//点全选，下面的子input都被选中
		var all = document.getElementById('whole');
		//获取子input元素对象集合
		var oinputs = document.querySelector('tbody').querySelectorAll('input');
		console.log(oinputs);
		//给all绑定点击事件
		all.onclick = function(){
			//每个input都添加选中的属性值
			for(var i=0;i<oinputs.length;i++){
				//oinputs[i] document.querySelector('tbody').querySelectorAll('input')[0]
				oinputs[i].checked = this.checked;
			}
		}
		
		//给每个子input添加点击事件，如果其中某一个或多个都未选中则全选不能勾选，否则可以勾选
		//点一个，所有的子input节点轮询一遍
		for(var i=0;i<oinputs.length;i++){
			oinputs[i].onclick = function(){
				//假设可以全选
				var flag = true;
				for(var i=0;i<oinputs.length;i++){
					//!oinputs[i].checked 某个input元素节点的属性是未勾选的则全选失效
					if(!oinputs[i].checked){
						flag = false;
					}
				}
				//给全选赋值
				all.checked = flag;
			}
		}
		
	</script>
</body>

</html>